<template>
    <div class="login-page">
        <div class="login-header">
            <div class="container">
                <div class="lheader-main">
                    <a href="/" class="header-logo flex-center">
                        <img class="logo" src="@/assets/logo/logo_all.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="login-main">
            <img class="login-bg" src="@/assets/images/bg_pic.jpg" alt="">
            <div class="login-box">
                <div class="login-cont">

                    <div class="login-navs flex-center">
                        <div @click="navchange(1)" class="nav-item  flex-center" :class="{ on: navtype == 1 }">
                            账户密码登录
                        </div>
                        <!-- <div @click="navchange(2)" class="nav-item flex-center" :class="{ on: navtype == 2 }">
                            手机号登录
                        </div> -->
                    </div>

                    <div class="login-form">
                        <div class="f-err " :class="{ on: showerr }">
                            <img class="icon" src="@/assets/images/icon_warn.png" alt="">
                            <div>
                                <span v-if="navtype == 1">
                                    <span v-if="captchaEnabled">账号名或登录密码或验证码不正确</span>
                                    <span v-else>账号名或登录密码不正确</span>
                                </span>
                                <span v-if="navtype == 2">验证码输入不正确</span>
                            </div>
                        </div>
                        <div v-if="navtype == 1" class="f-cont">
                            <div class="f-item flex-center">
                                <div class="f-icon">
                                    <img class="icon" src="@/assets/images/icon_login_user.png" alt="">
                                </div>
                                <input v-model="loginForm.username" type="text" class="finput" placeholder="用户名">
                            </div>
                            <div class="f-item fvvv2 flex-center">
                                <div class="f-icon">
                                    <img class="icon" src="@/assets/images/icon_login_lock.png" alt="">
                                </div>
                                <input v-model="loginForm.password" @keyup.enter="handleLogin"
                                    :type="showpwd ? 'text' : 'password'" class="finput" placeholder="请输入您的密码">
                                <div @click="showpwdfun" class="f-icon">
                                    <img class="icon2" src="@/assets/images/eye_close.png" alt="">
                                </div>
                            </div>
                            <div v-if="captchaEnabled" class="f-vbox">
                                <div class="f-item fvvv3 flex-center">
                                    <div class="f-icon">
                                        <img class="icon" src="@/assets/images/icon_Code.png" alt="">
                                    </div>
                                    <input v-model="loginForm.code" @keyup.enter="handleLogin" type="text"
                                        class="finput" placeholder="验证码">
                                </div>
                                <div class="register-code">
                                    <img :src="codeUrl" @click="getCode" class="register-code-img" />
                                </div>
                            </div>
                        </div>

                        <div v-if="navtype == 2" class="f-cont">
                            <div class="f-item flex-center">
                                <div class="f-icon">
                                    <img class="icon" src="@/assets/images/icon_login_tel.png" alt="">
                                </div>
                                <input v-model="loginForm.username" type="text" class="finput" placeholder="手机号">
                            </div>
                            <div class="f-item fvvv2 flex-center">
                                <div class="f-icon">
                                    <img class="icon" src="@/assets/images/icon_Code.png" alt="">
                                </div>
                                <input v-model="loginForm.code" type="text" class="finput" placeholder="验证码">
                                <div @click="getCodeNumber" class="code">
                                    {{ code_text }}
                                </div>
                            </div>
                        </div>
                        <div @click="handleLogin" class="f-btn flex-center" style="cursor: pointer;">
                            登 录
                        </div>
                    </div>

                    <div class="login-fbox flex-center">
                        <div class="f-item">
                            <router-link class="link-type" :to="'/register'">注册账户</router-link>
                        </div>
                      <!--  <div class="f-line"></div> -->
                        <!-- <div class="f-item">忘记密码 </div>
                        <div class="f-line"></div> -->
                      <!--  <div class="f-item f-color">返回</div> -->
                    </div>

                </div>
            </div>
        </div>
        <div class="login-footer flex-center">
            <div class="text">@ 深圳市耘融易互联网有限公司 粤ICP备2024166865号</div>
        </div>
    </div>
</template>

<script setup>
import { getCodeImg, getCodeNum } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from '@/store/modules/user'
import { ElMessage } from 'element-plus'


const userStore = useUserStore()
const router = useRouter();
const { proxy } = getCurrentInstance();

const loginForm = ref({
    username: "",
    password: "",
    rememberMe: false,
    code: "",
    uuid: ""
});

const navtype = ref(1); // 1 = 账号密码 2 = 验证码
const codeUrl = ref("");
const loading = ref(false);

// 显示错误
const showerr = ref(false);
// 显示密码开关
const showpwd = ref(false);

// 数字验证码
const code_timer = ref(null);
const code_secend = ref(60);
const code_text = ref("获取验证码");
const code_dis = ref(false);

// 验证码开关
const captchaEnabled = ref(true);
// 注册开关
const register = ref(false);
const redirect = ref(undefined);


function navchange(index) {
    loginForm.value.username = ""
    loginForm.value.password = ""
    loginForm.value.code = ""
    clearTimer(0)

    navtype.value = index
}


function handleLogin() {
    if (loading.value) {
        return
    }
    loading.value = true;
    // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
    if (loginForm.value.rememberMe) {
        Cookies.set("username", loginForm.value.username, { expires: 30 });
        Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
    } else {
        // 否则移除
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove("rememberMe");
    }
    // 调用action的登录方法
    userStore.login(loginForm.value).then(() => {
        router.push({ path: redirect.value || "/admin" });
    }).catch(() => {
        showerr.value = true;
        loading.value = false;
        // 重新获取 图形验证码
        if (captchaEnabled.value) {
            getCode();
        }
    });
}

function showpwdfun() {
    var show = showpwd.value
    showpwd.value = !show
}


function _getCode() {
    getCodeNum(loginForm.value).then(res => {
        ElMessage({ message: '获取成功', type: 'success' })
    }).catch(() => {
        clearInterval(code_timer.value)
        code_timer.value = "";
        code_secend.value = 60;
        code_text.value = '请稍后获取';
        code_dis.value = false
    });
}

function getCodeNumber() {
    if (code_dis.value) {
        return
    }
    if (!loginForm.value.username) {
        ElMessage({ message: '请输入手机号', type: 'error' })
        return
    }
    code_dis.value = true;
    code_text.value = code_secend.value + '秒';
    code_timer.value = setInterval(() => {
        const secend = code_secend.value - 1
        if (secend <= 0) {
            clearTimer(1)
        } else {
            code_secend.value = secend
            code_text.value = secend + '秒'
        }
    }, 1000)
    _getCode()
}


function clearTimer(type) {
    code_secend.value = 60
    if (type == 0) {
        code_text.value = '获取验证码'

    } else {
        code_text.value = '重新获取'

    }
    code_dis.value = false
    if (code_timer.value) {
        clearInterval(code_timer.value)
        code_timer.value = ""
    }
}


function getCode() {
    getCodeImg(loginForm.value).then(res => {
        captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (captchaEnabled.value) {
            codeUrl.value = "data:image/gif;base64," + res.img;
            loginForm.value.uuid = res.uuid;
        }
    });
}

function getCookie() {
    const username = Cookies.get("username");
    const password = Cookies.get("password");
    const rememberMe = Cookies.get("rememberMe");
    loginForm.value = {
        username: username === undefined ? loginForm.value.username : username,
        password: password === undefined ? loginForm.value.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
    };
}

getCode();
getCookie();
</script>

<style lang='scss' scoped></style>
